<template>
    <div>
        <div v-if="this.$route.meta.keepAlive">
         <keep-alive>
            <transition name="popup">
                <router-view />
            </transition>
        </keep-alive>
        </div> 
    <div v-if="!this.$route.meta.keepAlive">
        <!-- 搜索框 -->
        <van-search v-model="value" placeholder="请输入搜索关键词" shape="round"  @click="fun()" disabled/>
        <!-- /搜索框 -->
        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
            <van-swipe-item v-for="v in banner" :key="v.id">
                <img :src="v.image_url" alt="" width="100%" >
            </van-swipe-item>
        </van-swipe>
        <!-- /轮播图 -->
        <!-- 金刚区 -->
        <van-grid :column-num="5">
            <van-grid-item :icon="v.icon_url" :text="v.name" v-for="v in channel" :key="v.id" @click="channel_fun(v.id)"/>
        </van-grid>
        <!-- /金刚区 -->
        <!-- 品牌 -->
        <div class="brand topic">
            <h2 class="h2">品牌制造商直供</h2>
            <div class="brand-pic">
                <div class="brand_pic" v-for="v in brandList" :key="v.id" @click="brand(v.id)">
                    <img :src="v.pic_url" alt="" >
                    <h4>{{v.name}}</h4>
                    <span>￥ {{v.floor_price.toFixed(2)}} 元</span>
                </div>
            </div>
        </div>
        <!-- /品牌 -->
        <!-- 新品 -->
        <div class="goods topic" >
            <h2 class="h2">周一周四·新品首发</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in newGoodsList" :key="v.id" @click="goods_list(v.id)" >
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span>￥ {{v.retail_price}} 元</span>
                </div>
            </div>
        </div>

        <!-- /新品 -->
        <!-- 人气推荐 -->
        <div class="recommend topic">
            <h2 class="h2">人气推荐</h2>
            <van-card
                price="699.00元"
                :desc="v.goods_brief"
                :title="v.name"
                :thumb="v.list_pic_url"
            v-for="v in hotGoodsList" :key="v.id" />
        </div>
        <!-- /人气推荐 -->
        <!-- 专题精选 -->
        <div class="choiceness topic">
            <h2 class="h2">专题精选</h2>
            <div class="choiceness_box">
                <van-swipe :loop="false" :width="300" :height="200" :show-indicators="false">
                    <van-swipe-item class="choiceness_pic" v-for="v in topicList" :key="v.id">
                        <img :src="v.item_pic_url" alt="" width="100%" height="70%">
                        <div class="choiceness_box_tex">
                            <div><h2> {{v.title}} <span>￥ {{v.price_info.toFixed(2)}} 元起</span></h2></div>
                            <p>{{v.subtitle}}</p>
                        </div>
                    </van-swipe-item>
                </van-swipe>
            </div>
            
        </div>
        <!-- /专题精选 -->
        <!-- 居家 -->
        <div class="goods topic">
            <h2 class="h2">居家</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in home" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /居家 -->
        <div class="goods topic1">
            <h2 class="h2">餐厨</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in kit" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /餐厨 -->
        <!-- 饮食 -->
        <div class="goods topic1">
            <h2 class="h2">饮食</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in diet" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /饮食 -->
        <!-- 配件 -->
        <div class="goods topic1">
            <h2 class="h2">配件</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in part" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /配件 -->
        <!-- 服饰 -->
        <div class="goods topic1">
            <h2 class="h2">服饰</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in cloth" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /杂货 -->
        <div class="goods topic1">
            <h2 class="h2">杂货</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in sundry" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /杂货 -->
         <!-- /洗护 -->
        <div class="goods topic1">
            <h2 class="h2">洗护</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in clean" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
        <!-- /洗护 -->
         <!-- /志趣 -->
        <div class="goods topic1">
            <h2 class="h2">志趣</h2>
            <div class="goods-pic">
                <div class="goods_pic" v-for="v in inclination" :key="v.id" v-lazy="v.list_pic_url">
                    <img :src="v.list_pic_url" alt="" >
                    <span>{{v.name}}</span>
                    <span> ￥ {{v.retail_price.toFixed(2)}} 元 </span>
                </div>
            </div>
        </div>
    </div>
        <!-- /志趣 -->
            
    </div>
    
</template>

<script>
import {HomeList} from "@/request/home.js"
export default {
    name: 'ShopHome',

    data() {
        return {
            value: '',
            banner:[],
            brandList:[],
            channel:[],
            hotGoodsList:[],
            newGoodsList:[],
            topicList:[],
            home:[],
            kit:[],
            diet:[],
            part:[],
            cloth:[],
            baby:[],
            sundry:[],
            clean:[],
            inclination:[]
        };
    },
    created(){
        HomeList()
        .then(res=>{
            console.log(res.data.data);
            this.banner = res.data.data.banner;
            this.brandList = res.data.data.brandList;
            this.channel = res.data.data.channel;
            this.hotGoodsList = res.data.data.hotGoodsList;
            this.newGoodsList = res.data.data.newGoodsList;
            this.topicList = res.data.data.topicList;
            this.home = res.data.data.categoryList[0].goodsList;
            this.kit = res.data.data.categoryList[1].goodsList;
            this.diet = res.data.data.categoryList[2].goodsList;
            this.part = res.data.data.categoryList[3].goodsList;
            this.cloth = res.data.data.categoryList[4].goodsList;
            this.baby = res.data.data.categoryList[5].goodsList;
            this.sundry = res.data.data.categoryList[6].goodsList;
            this.clean = res.data.data.categoryList[7].goodsList;
            this.inclination = res.data.data.categoryList[8].goodsList;
        }).catch(err=>{
            console.log(err);
        })
    },
    methods: {
        fun(){
            this.$router.push('/home/popup');
        },
        channel_fun(id){
            this.$router.push({
                path:'/channel',
                query:{
                    id
                }
            })
        },
        // 品牌
        brand(id){
            this.$router.push({
                path:'/brand',
                query:{
                    id
                }
            })
        },
        // 商品详情
        goods_list(id){
            this.$router.push({
                path:'/details',
                query:{
                    id
                }
            })
        }
    },
};
</script>

<style lang="less">
// 轮播
.my-swipe {
    width: 100%;
    height: 2rem;
}
// 标题样式
.topic{
    margin: 20px 0;
    background-color: #fff;
}
.topic1{
    background-color: #fff;
}
// h2标签样式
.h2{
    width: 100%;
    font-size: 20px;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
    background-color: #fff;
    font-family: 黑体;
}
// 品牌
.brand {
    width: 100%;
   .brand-pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        
        .brand_pic{
            width: 49%;
            margin-top: 1%;
            position: relative;
            font-family: 黑体;
            font-size: .14rem;
            img{
                width: 100%;
            }
            h4{
                position: absolute;
                left: 10%;
                top: 10%;
            }
            span{
                position: absolute;
                left: 10%;
                top: 30%;
                color: #8b0000;
            }
        }
   }
}
// 商品
.goods {
    // height: 300/100rem;
   .goods-pic{
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 14px;
        font-family: 黑体;
        .goods_pic{
            width: 50%;
            // height: 1.7rem;
            // background-color: aqua;
            display: flex;
            flex-direction: column;
            align-items: center;
            img{
                width: 90%;
                
            }
            span{
                display: block;
                width: 100%;
                text-align: center;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                &:first-of-type{
                    font-size: 14px;
                    color: #333;
                }
                &:nth-of-type(2){
                    color: #8b0000;
                    margin-top: .1rem;
                    margin-bottom: .3rem;
                }
            }
        }
   }
}
// 推荐
.recommend{
    margin:0 0 10px;
    background-color: #fff;
     .van-card__title{
        font-size: 18px;
        color: #323233;
        line-height: 18px;
     }
     .van-card__desc{
        font-size: 12px;
        margin-top: .16rem;
     }
     .van-card__price-currency{
        font-size: .12rem;
        color: #8D0000;
     }
     .van-card__price-integer{
        margin-left: .12rem;
        font-size: .12rem;
        color: #8D0000;
     }
     .van-card__price-decimal{
        font-size: .12rem;
        color: #8D0000;
     }
}
// 精选
.choiceness{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .choiceness_box{
        width: 95%;
        .van-swipe__track{
            height: 250px !important;
        }
        .choiceness_pic{
        padding-right: .1rem;
        font-family: 黑体;
        .choiceness_box_tex{
            // width: 3rem;
            
               h2{
                // width: 100% !important;
                width: 95%;
                height: .40rem;
                line-height: .40rem;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                    span{
                        // width: 100%;
                        color: #8b0000;
                    }
                } 
                p{
                    width: 2.9rem !important;
                    // width: 2rem;
                    font-size: .14rem;
                    margin-bottom: .1rem;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
        }
    }
    }
    
}
// 路由动画
.popup-enter{
    right: -100%;
}
.popup-enter-active{
    transition: all .8s;
}
.popup-enter-to{
    right: 0%;
}
</style>